<template>
  <Common title="借用">
    <template v-slot:content>
      <div class="content">
        <div class="container">
          <BorrowInfo
            v-show="active == 0"
            @goStep="goStep"
            ref="borrowInfo"
          ></BorrowInfo>
          <BorrowTemplate v-show="active == 1" @goStep="goStep">
          </BorrowTemplate>
          <BorrowGoods
            v-show="active == 2"
            @goStep="goStep"
            ref="borrowGoods"
          ></BorrowGoods>
          <BorrowOutbound
            v-show="active == 3"
            @goStep="goStep"
            ref="borrowOutbound"
          ></BorrowOutbound>
          <BorrowResult
            v-show="active == 4"
            ref="borrowResult"
            @goStep="goStep"
          ></BorrowResult>
        </div>
        <div class="step">
          <el-steps :active="active" align-center finish-status="success">
            <el-step
              v-for="(item, index) in data"
              :key="index"
              :title="item"
              @click.native="jump(index)"
              class="stepSuc"
            ></el-step>
          </el-steps>
        </div>
      </div>
    </template>
  </Common>
</template>

<script>
import Common from "@/components/common.vue";
import { getUserInfo, isSkipShop } from "@/common/api";
import BorrowInfo from "./components/borrow-info.vue";
import BorrowTemplate from "./components/borrow-template.vue";
import BorrowGoods from "./components/borrow-goods.vue";
import BorrowOutbound from "./components/borrow-outbound.vue";
import BorrowResult from "./components/borrow-result.vue";
export default {
  name: "Borrow",
  props: {},
  components: {
    Common,
    BorrowInfo,
    BorrowTemplate,
    BorrowGoods,
    BorrowOutbound,
    BorrowResult,
    timer: null,
  },
  data() {
    return {
      active: 0,
      data: ["录入信息", "选择模板", "拿取物品", "确认出库", "完成出库"],
    };
  },
  computed: {},
  watch: {
    active(newV) {
      if (newV != 3) {
        this.$refs.borrowGoods.closeT();
      }
      if (newV == 2) {
        this.$refs.borrowGoods.updataD();

        this.timer = setInterval(() => {
          this.start(); //开始轮询是否一端已提交
        }, 5000);
      }
      if (newV == 3) {
        let data = this.$refs.borrowGoods.tableData;
        this.$refs.borrowOutbound.tableData = data;
        let form = this.$refs.borrowInfo.ruleForm;
        this.$refs.borrowOutbound.data.forEach((i) => {
          i.value = form[i.key];
        });
        this.$refs.borrowOutbound.transData();
      }
      if (newV == 4) {
        let obj = {
          ...this.$refs.borrowInfo.ruleForm,
          detailList: this.$refs.borrowOutbound.tableData,
          status: 0, //借用
          warehouseId: 1,
        };
        obj.detailList.forEach((i) => {
          if (i.goodsList && i.goodsList.length) {
            i.goodsCode = i.goodsList.map((i) => i.goodsCode).join(",");
          } else {
            i.goodsCode = "";
          }
        });

        this.$refs.borrowResult.excute(obj);
      }
    },
  },
  created() {},
  methods: {
    goStep(e) {
      this.active = e;
    },
    jump(e) {
      this.active = e;
    },
    start() {
      isSkipShop().then((res) => {
        if (res.success && res.data) {
          this.close();
          if (this.active == 4) return;
          let room = localStorage.getItem("room");
          window.location.replace(`/#/main?room=${room}`);
        }
      });
    },
    close() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
  },
  mounted() {
    if (this.$route.query.type) {
      //跳过基础信息
      getUserInfo().then((res) => {
        if (res.success) {
          this.$refs.borrowInfo.ruleForm = res.data;
          this.active = 2;
        }
      });
    }
  },
  destroyed() {
    this.close();
  },
};
</script>


<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  .container {
    width: 100%;
    height: 80%;
  }
  .step {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}
.stepSuc :hover {
  cursor: pointer;
}
</style>
